<template>
  <div class="mgb20" ref='editor'  ></div>
</template>

<script>
    import WangEditor from "wangeditor";
    import { ref, reactive, inject, watch, onMounted, onBeforeUnmount } from "vue";
    import { getToken } from "@/utils/auth";
    export default {
      name: "wangEditor",
      props: {
          pData: Object
      },
      data() {
        return {
          content: {
            html: "",
            text: "",
          },
        }
      },
      watch: {
        'content.html': {
          handler(newName, oldName) {
            let nameEn = this.pData.nameEn;
            let clickName = this.pData.onclickName;
            const data = {};
            data[nameEn] = newName;
            this.$emit(clickName, data)
          },
          deep: true,
        },
      },
      mounted() {
        let instance;
        instance = new WangEditor(this.$refs["editor"]);
        instance.config.zIndex = 1;
        instance.config.onchange = (newHtml) => {
            this.content.html = newHtml;
        };
        // 隐藏网络图片
        instance.config.showLinkImg = false;
        // 关闭粘贴内容中的样式
        instance.config.pasteFilterStyle = false;
        // 忽略粘贴内容中的图片
        instance.config.pasteIgnoreImg = false;
        instance.config.uploadFileName = 'file';
        instance.config.uploadImgServer  = process.env.VUE_APP_BASE_API + "/common/upload"; // 上传的图片服务器地址
        instance.config.uploadImgHeaders  = {
          Authorization: "Bearer " + getToken()
        };

        // 将图片大小限制为 3M
        instance.config.uploadImgMaxSize = 3 * 1024 * 1024;
        instance.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
        instance.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']

        //自定义上传图片事件
        instance.config.uploadImgHooks = {
          before: function (xhr, editor, files) {

          },
          success: function (xhr, editor, result) {
            console.log("上传成功");
          },
          fail: function (xhr, editor, result) {
            console.log("上传失败,原因是" + result);
          },
          error: function (xhr, editor) {
            console.log("上传出错");
          },
          timeout: function (xhr, editor) {
            console.log("上传超时");
          },
          customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            // var url = process.env.VUE_APP_BASE_API + result.fileName;
            var url = result.url;
            insertImg(url)
            // result 必须是一个 JSON 格式字符串！！！否则报错
          }

        };
        instance.create();
        if(this.pData.zhi && this.pData.zhi != "null"){
            instance.txt.html(this.pData.zhi);
        }
        if(this.pData.isEdit && this.pData.allowModification == 0){
          instance.disable();
        }
      },
      created() {
      },
      methods: {
        clearZhi() {
          this.pData.zhi = "";
          this.content.html = "";
          this.content.text = "";
        }
      },
    }
</script>

<style scoped>
  .w-e-toolbar{
    flex-wrap:wrap;
  }
</style>
